<template>
  <div class="bridge">
    <el-card class="box-card left">
      <div class="text">所有测点</div>
      <el-tree
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </el-card>
    <el-card class="box-card right">
      <div class="flexBetween">
        <div class="flex">
          <el-input placeholder="请输入" v-model="name" size="small"></el-input>
          <el-button type="primary" size="small" class="paddingLeft">查询</el-button>
        </div>
        <div>
          <el-button size="small" type="primary" plain icon="el-icon-plus" @click="add = true">新增测点</el-button>
        </div>
      </div>
      <el-table :data="tableData"  :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}" class="tableTop" height="100%">
        <el-table-column label="测点名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="测点编号" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="所属截面名称" prop="type" show-overflow-tooltip></el-table-column>
        <el-table-column label="X坐标" prop="desc" show-overflow-tooltip></el-table-column>
        <el-table-column label="Y坐标" prop="area" show-overflow-tooltip></el-table-column>
        <el-table-column label="截面图" prop="status" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" width="120">
            <template slot-scope="scope">
                <el-tooltip content="关联 测点">
                <el-button type="text" icon="el-icon-connection"></el-button>
                </el-tooltip>
                <el-button type="text" icon="el-icon-edit-outline"></el-button>
                <el-button type="text" icon="el-icon-delete" style="color:red !important"></el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="100">
        </el-pagination>
      </div>
    </el-card>
        <vx-popup
            title="新增测点"
            width="680px"
            @close="cancelFormSubmit"
            :active.sync="add"
            @confirmPopup="submit"
            @cancelPopup="cancelFormSubmit"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-row justify="space-between" :gutter="20"> 
                    <el-col :span="10">
                <el-form-item label="桥梁名称:" prop="name">
                    <el-input v-model="ruleForm.name"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="10">
                <el-form-item label="桥梁编码:" prop="code">
                    <el-input v-model="ruleForm.code"></el-input>
                </el-form-item>
                    </el-col>
                </el-row>
                <el-row justify="space-between" :gutter="20"> 
                    <el-col :span="10">
                <el-form-item label="是否为组:" prop="flag">
                    <el-select v-model="ruleForm.flag" placeholder="请选择">
                        <el-option label="是" value="shanghai"></el-option>
                        <el-option label="否" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                    </el-col>
                    <el-col :span="10">
                <el-form-item label="桥梁类型:" prop="type">
                    <el-select v-model="ruleForm.type" placeholder="请选择">
                        <el-option label="拉索桥" value="shanghai"></el-option>
                        <el-option label="钢筋桥" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                    </el-col>
                </el-row>
                 <el-row justify="space-between" :gutter="20"> 
                    <el-col :span="10">
                <el-form-item label="桥梁位置:" prop="address">
                    <el-input v-model="ruleForm.address"></el-input>
                </el-form-item>
                    </el-col>
                    <el-col :span="10">
                <el-form-item label="桥梁子桥:" prop="children">
                    <el-select v-model="ruleForm.children" placeholder="请选择">
                        <el-option label="南京大桥" value="shanghai"></el-option>
                        <el-option label="武汉大桥" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                    </el-col>
                 </el-row>
                <el-form-item label="运行状态:" prop="status">
                    <el-radio-group v-model="ruleForm.status">
                        <el-radio label="开启"></el-radio>
                        <el-radio label="关闭"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="桥实景图:" prop="desc">
                    <el-upload
                        class="upload-demo"
                        action="https://jsonplaceholder.typicode.com/posts/"
                        :on-preview="handlePreview"
                        :on-remove="handleRemove"
                        :before-remove="beforeRemove"
                        multiple
                        :limit="3"
                        :on-exceed="handleExceed"
                        :file-list="fileList">
                        <el-button size="small" type="success" plain>上传图片</el-button>
                    </el-upload>
                </el-form-item>
                <el-form-item label="桥梁简介:" prop="desc">
                    <el-input type="textarea" v-model="ruleForm.desc" maxlength="500" show-word-limit></el-input>
                </el-form-item>
            </el-form>
        </vx-popup>
  </div>
</template>
<script>
export default {
  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "江苏省",
          children: [
            {
              id: 4,
              label: "南京市",
              children: [
                {
                  id: 9,
                  label: "江宁区"
                },
                {
                  id: 10,
                  label: "鼓楼区"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "浙江省",
          children: [
            {
              id: 5,
              label: "杭州市"
            },
            {
              id: 6,
              label: "宁波市"
            }
          ]
        },
        {
          id: 3,
          label: "安徽省",
          children: [
            {
              id: 7,
              label: "合肥市"
            },
            {
              id: 8,
              label: "芜湖市"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      name: "",
      tableData: [
        {
          name: '南京大桥',
          code: 'NJ23',
          type: '拉索桥',
          desc: '中国自行设计和建造',
          area: '江苏南京',
          status: '运行',
          bridgeType: '城市桥梁',
          address: '位置',
          children: [
              {
                name: '南京大桥',
                code: 'NJ23',
                type: '拉索桥',
                desc: '中国自行设计和建造',
                area: '江苏南京',
                status: '运行',
                bridgeType: '城市桥梁',
                address: '位置'
              }
            ]
        }, 
        {
          name: '南京大桥',
          code: 'NJ23',
          type: '拉索桥',
          desc: '中国自行设计和建造',
          area: '江苏南京',
          status: '运行',
          bridgeType: '城市桥梁',
          address: '位置',
        }, 
        {
          name: '南京大桥',
          code: 'NJ23',
          type: '拉索桥',
          desc: '中国自行设计和建造',
          area: '江苏南京',
          status: '运行',
          bridgeType: '城市桥梁',
          address: '位置',
        }, 
        {
          name: '南京大桥',
          code: 'NJ23',
          type: '拉索桥',
          desc: '中国自行设计和建造',
          area: '江苏南京',
          status: '运行',
          bridgeType: '城市桥梁',
          address: '位置',
        }
    ],
    add:false,
    ruleForm: {
        name: '',
        code: '',
        flag: '',
        type: '',
        address: '',
        children: '',
        status: '',
        desc: ''
    },
    rules: {
        name: [
        { required: true, message: '请输入桥梁名称', trigger: 'blur' }
        ],
        code: [
        { required: true, message: '请输入桥梁编码', trigger: 'blur' }
        ],
        flag: [
        { required: true, message: '请选择', trigger: 'change' }
        ],
        type: [
        { required: true, message: '请选择桥梁类型', trigger: 'change' }
        ],
        address: [
        { required: true, message: '请输入桥梁位置', trigger: 'blur' }
        ],
        children: [
        { required: true, message: '请选择桥梁子桥', trigger: 'change' }
        ],
        status: [
        { required: true, message: '请选择运行状态', trigger: 'change' }
        ],
        desc: [
        { required: true, message: '请填写桥梁简介', trigger: 'blur' }
        ]
    }
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    cancelFormSubmit() {},
    submit() {},
    component(){
        this.$router.push("/bridgeInformation/bridgeComponent")
    },
  }
};
</script>
<style scoped lang="scss">
/deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 44px;
}
.bridge {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 24%;
    height: 80vh;
    .text {
      margin: 10px 0;
    }
  }
  .right {
    width: 74%;
    .flexBetween{
        display: flex;
        justify-content: space-between;
        .paddingLeft{
            margin-left:20px;
        }
    }
    .tableTop {
        margin-top:20px;
    }
    .page{
        margin-top:20px;
        text-align: center;
    }
  }
}
</style>